<template>
  <div>
    <HeadNav page-name="待结算收益" :borderType="true" :showNav="true" />
    <div class="stay_settlement_earnings">
      <div class="settlement_title">
        <div class="settlement_money">
          <div>当前待结算</div>
          <div class="settlement_amount">¥<span>{{unsettledProfitMoney | rounding}}</span></div>
        </div>
        <div class="orders_num">订单数: {{unsettledOrderCount}}</div>
      </div>
      <div class="stay_settlement_order">
        <div>待结算订单</div>
        <div class="screen_order" @click="showScreen = true">
          筛选<img
            class="screen_img"
            src="https://image.qqpyyds.com/mpAppImg/icon/jiantou4_icon.png"
          />
        </div>
      </div>
      <scroll-view class="scroll_order_list" :class="{ 'scroll_order_ios': isIOS }" :scroll-anchoring="true" :scroll-y="true">
        <div
          class="order_list"
          v-for="(item, index) in profitList"
          :key="index"
        >
          <div class="groupon_order">
            <div>跟团号: {{item.followGroupNum}}</div>
            <span>{{item.statusT}}</span>
          </div>
          <div class="goods_message">
            <img
              class="goods_img"
              mode="aspectFill"
              :src="item.thumbnail"
              alt=""
            />
            <div class="goods_title">
              <div class="line_clamp_2">
                {{item.title}}
              </div>
              <span>x1</span>
            </div>
          </div>
          <div class="earnings_source">
            <div>
              <div class="buyers">
                <div class="line_clamp buyers_name">购买者：{{item.nickname}}</div>
                <span class="order_type">订单类型：{{item.levelT}}</span>
              </div>
              <div>下单时间：{{item.orderTime}}</div>
            </div>
            <div class="income_num">+{{item.money}}</div>
          </div>
        </div>
        <div class="no_more">没有更多了~</div>
      </scroll-view>
    </div>
    <!-- 筛选 -->
    <u-popup :safe-area-inset-bottom="true" width="550" mode="right" v-model="showScreen">
			<view class="content_scroll" :class="{ 'content_scroll_ios': isIOS }">
				<scroll-view class="screen_scroll" scroll-y="true" style="">
					<view>
						<div class="screening_text">筛选</div>
            <div>
              <div class="interval_text">时间区间</div>
              <view style="display: flex;">
                <view
                  :class="{ active_all: activeAll === index }"
                  class="my-release-all"
                  v-for="(all, index) in allList"
                  :key="index"
                  @click="allListIndex(index)"
                >
                  {{ all.cat_name }}
                </view>
              </view>
            </div>
            <div>
              <div class="interval_text">自定义时间</div>
              <view style="display: flex; align-items: center;">
                <view class="my-release-all" @click="customTime(0)">{{startTime}}</view>
                <view class="separated"></view>
                <view class="my-release-all" style="margin: 0;" @click="customTime(1)">{{endTime}}</view>
              </view>
            </div>
            <div>
              <div class="interval_text">订单状态</div>
              <view style="display: flex;">
                <view
                  :class="{ active_all: activeStatus === all.value }"
                  class="my-release-all"
                  v-for="(all, index) in orderStatus"
                  :key="index"
                  @click="orderStatusIndex(all)"
                >
                  {{ all.cat_name }}
                </view>
              </view>
            </div>
					</view>
				</scroll-view>
				<view class="confrim_btn" :class="{ 'confrim_btn_ios': isIOS }">
					<div class="confrim_cancel" @click="showScreen = false;">取消</div>
					<div class="confrim_screening" @click="screening">筛选</div>
				</view>
			</view>
		</u-popup>
    <!-- 筛选时间 -->
    <u-picker mode="time" confirm-color="#e44435" confirm-text="确定" :end-year="currentYears" v-model="showTime" @confirm="timeConfirm" :params="params"></u-picker>
  </div>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
import Money from '@/api/money.js'
export default {
  name: "staySettlement",
  components: { HeadNav },
  data() {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
      profitList: [
        {
          followGroupNum: 22,
          level: 1,
          levelT: 1,
          money: 23.13,
          nickname: "书香姑娘书香姑娘书香姑娘",
          orderTime: "2021/09/15 13:24:26",
          status: 1,
          statusT: 1,
          thumbnail:
            "https://image.qqpyyds.com/mpAppImg/other/goods_img.jpg",
          title:
            "这里是团标题，最多两行。这里是团标题，最多两行。这里是团这里是团标题，最多两行。这里是团标题",
        },
        {
          followGroupNum: 33,
          level: 2,
          money: 45.46,
          nickname: "哪吒",
          orderTime: "2021/09/14 17:24:26",
          status: 3,
          thumbnail:
            "https://image.qqpyyds.com/mpAppImg/other/goods_img.jpg",
          title:
            "这里是团标题，最多两行。这里是团标题，最多两行。这里是团这里是团标题，最多两行。这里是团标题",
        },
        {
          followGroupNum: 15,
          level: 3,
          money: 78.97,
          nickname: "如来",
          orderTime: "2021/09/11 15:24:26",
          status: 4,
          thumbnail:
            "https://image.qqpyyds.com/mpAppImg/other/goods_img.jpg",
          title:
            "这里是团标题，最多两行。这里是团标题，最多两行。这里是团这里是团标题，最多两行。这里是团标题",
        },
        {
          followGroupNum: 20,
          level: 1,
          money: 70.97,
          nickname: "悟空",
          orderTime: "2021/09/11 15:24:26",
          status: 6,
          thumbnail:
            "https://image.qqpyyds.com/mpAppImg/other/goods_img.jpg",
          title:
            "这里是团标题，最多两行。这里是团标题，最多两行。这里是团这里是团标题，最多两行。这里是团标题",
        },
      ],
      showScreen: false,
      allList: [
        {
          cat_name: "今天",
        },
        {
          cat_name: "七天",
        },
        {
          cat_name: "最近一个月",
        },
      ],
      activeAll: 0,
      unsettledProfitMoney: 0,
      unsettledOrderCount: 0,
      orderStatus: [
        {
          value: 1,
          cat_name: "待收货",
        },
        {
          value: 2,
          cat_name: "待发货",
        },
        {
          value: 3,
          cat_name: "售后期",
        },
      ],
      activeStatus: 0,
      showTime: false,
      // 用于获取当前年份
      currentYears: '',
      currentMonth: '',
      currentDay: '',
      startTime: '',
      endTime: '',
      // 需要显示的参数
      params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
      customIndex: null
    };
  },
  onLoad () {
    this.getUnsettledProfitList()
    let year = new Date().getFullYear()
    this.currentYears = year
    let month = new Date().getMonth() + 1
    if (month < 10) month = '0' + month
    let day = new Date().getUTCDate()
    if (day < 10) this.currentDay = '0' + day
    let datepage = year + '-' + month + '-' + day
    this.startTime = datepage
    this.endTime = datepage
  },
  methods: {
    async getUnsettledProfitList() {
      let params = {
        currentPage: 1,
        endTime: this.endTime,
        pageSize: 20,
        startTime: this.startTime,
        status: 0
      }
      Money.getUnsettledProfitList(params).then(res => {
        console.log(res, '当前待结算金额----------------0');
        if (res.code === 200 && res.data !== {}) {
          this.unsettledOrderCount = res.data.unsettledOrderCount
          this.unsettledProfitMoney = res.data.unsettledProfitMoney
          this.profitList = res.data.unsettledProfitMoney.records
        }
      })
      return
      if (this.profitList.length > 0) {
        for (let i = 0; i < this.profitList.length; i++) {
          // status
          switch (this.profitList[i].status) {
            case 1:
              this.profitList[i].statusT = '待支付'
              break;
            case 2:
              this.profitList[i].statusT = '关闭(未支付取消)'
              break;
            case 3:
              this.profitList[i].statusT = '已取消(已退款)'
              break;
            case 4:
              this.profitList[i].statusT = '待发货'
              break;
            case 5:
              this.profitList[i].statusT = '待收货'
              break;
            case 6:
              this.profitList[i].statusT = '已收货'
              break;
            case 7:
              this.profitList[i].statusT = '已完成'
              break;
            case 8:
              this.profitList[i].statusT = '已发货退款'
              break;
            case 9:
              this.profitList[i].statusT = '售后完成'
              break;
            case 10:
              this.profitList[i].statusT = '售后关闭'
              break;
            case 11:
              this.profitList[i].statusT = '售后中'
              break;
            default:
              break;
          }
          switch (this.profitList[i].level) {
            case 1:
              this.profitList[i].levelT = '直售'
              break;
            case 2:
              this.profitList[i].levelT = '帮卖'
              break;
            case 3:
              this.profitList[i].levelT = '分销'
              break;
            default:
              break;
          }
        }
      }
    },
    // 时间区间
    allListIndex (index) {
      this.activeAll = index
    },
    // 订单状态
    orderStatusIndex (item) {
      this.activeStatus = item.value
    },
    // 筛选时间确定事件
    timeConfirm (e) {
      console.log(e, '筛选时间确定事件');
      this.activeAll = null
      let current = e.year + '-' + e.month + '-' + e.day
      if (this.customIndex === 0) {
        this.startTime = current
      } else this.endTime = current
    },
    customTime (num) {
      this.showTime = true
      this.customIndex = num
    },
    // 确认筛选
    screening () {
      this.showScreen = false
      this.getUnsettledProfitList()
    }
  },
  filters: {
    // 只显示到两位小数点
    rounding (value) {
      return value>0?value.toFixed(2):0.00
    },
  }
};
</script>
<style lang="scss" scoped>
.stay_settlement_earnings {
  height: calc(100vh - 84px);
  background: #f2f3f5;
}
// 当前待结算
.settlement_title {
  display: flex;
  align-items: center;
  height: 202rpx;
  background: linear-gradient(125deg, #f37965 12%, #e44435);
  color: #fff;
  div {
    width: 50%;
  }
  .settlement_money {
    padding-left: 32rpx;
    padding-top: 48rpx;
    font-size: 28rpx;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.2) 3%,
      rgba(255, 255, 255, 0) 66%
    );
    .settlement_amount {
      margin-top: 16rpx;
      span {
        font-size: 36rpx;
        padding-left: 10rpx;
      }
    }
  }
  .orders_num {
    padding-right: 32rpx;
    text-align: right;
    opacity: 0.8;
    font-size: 24rpx;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 46rpx;
  }
}

// 待结算订单
.stay_settlement_order {
  background: #fff;
  height: 96rpx;
  margin-top: 24rpx;
  padding: 0 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.9);
  box-shadow: 0rpx -2rpx 0rpx 0rpx #eeeeee inset;
  .screen_order {
    color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    .screen_img {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

// 订单列表
.scroll_order_list {
  background: #f2f3f5;
  height: calc(100vh - 84px - 101px);
  &.scroll_order_ios {
  height: calc(100vh - 84px - 101px - 88px);
  }
}
.order_list {
  // height: calc(100vh - 84px - 101px -48px);
  // overflow: hidden;
  padding: 32rpx;
  background: #fff;
  .groupon_order {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #323233;
    margin-bottom: 24rpx;
    span {
      color: #fb9551;
    }
  }
  .goods_message {
    display: flex;
    background: #f2f3f5;
    border-radius: 8rpx;
    // 商品图片
    .goods_img {
      width: 128rpx;
      height: 128rpx;
      border-radius: 8rpx 0rpx 0rpx 8rpx;
    }
    .goods_title {
      display: flex;
      flex: 1;
      padding: 0 32rpx 0 24rpx;
      align-items: center;
      font-size: 24rpx;
      color: #969799;
      justify-content: space-between;
      div {
        width: 408rpx;
      }
      span {
        width: fit-content;
        color: #323233;
      }
    }
  }
}
.earnings_source {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #969799;
  font-size: 24rpx;
  .buyers {
    margin: 24rpx 0 16rpx;
    display: flex;
    .buyers_name {
      width: 252rpx;
    }
    .order_type {
      margin-left: 48rpx;
    }
  }
  .income_num {
    font-size: 32rpx;
    color: #e44435;
    font-weight: 500;
  }
}

// 没有更多了
.no_more {
  font-size: 24rpx;
  color: #969799;
  margin: 24rpx 0 34rpx;
  text-align: center;
}

// 筛选样式开始
.content_scroll {
  margin-top: 68px;
  &.content_scroll_ios {
    margin-top: 84px;
  }
}
.screen_scroll {
  padding-left: 24rpx;
}
.screening_text {
  font-size: 32rpx;
  font-weight: 500;
  color: #323233;
}
.interval_text {
  font-size: 28rpx;
  color: #323233;
  margin: 48rpx 0 24rpx;
}

.my-release-all {
  width: fit-content;
  padding: 0 32rpx;
  height: 56rpx;
  background: #f2f3f5;
  border-radius: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #969799;
  margin-right: 24rpx;
}
.active_all {
  color: #fff;
  background: #fb9551;
}

.separated {
  width: 32rpx;
  height: 2rpx;
  border: 2rpx solid #979797;
  margin-right: 24rpx;
}

.confrim_btn {
  position: fixed;
  bottom: 0;
  display: flex;
  height: 112rpx;
  width: 100%;
  font-size: 32rpx;
  color: rgba(0,0,0,0.90);
  &.confrim_btn_ios {
    bottom: 22px;
  }
  div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .confrim_cancel {
    box-shadow: 0rpx 2rpx 0rpx 0rpx #eeeeee inset; 
  }
  .confrim_screening {
    color: #fff;
    background: #e44435;
  }
}
</style>

